// 创建VUE对象 vm
let vm = new Vue({
    el: "#app", // 通过id选择器找到绑定的HTML内容
    // 改变Vue读取变量的语法
    delimiters: ['[[',']]'],
    data:{  // 数据对象
        // model
        username:"",
        password:"",
        password2:"",
        mobile:"",
        allow:"",
        uuid:"",
        image_code_url:"",
        image_code:"",
        mobile_code:"",
        sms_code_tip:"获取短信验证码",
        send_flag:false,

        // show
        error_username: false,
        error_password: false,
        error_password2: false,
        error_mobile: false,
        error_allow: false,
        error_image:false,
        error_mobile_code:false,


        // error
        error_username_message:"",
        error_mobile_message:"",
        error_image_message:"",
        error_mobile_code_message:"",
    },
    mounted() { // 页面加载完被调用
        // 生成图形验证码
        this.generate_image_code();
    },
    methods:{  // 方法 ; 定义和实现方法
        // 获取手机验证码
        send_sms_code(){
            // 避免用户恶意的点击短信验证码
            if (this.send_flag == true){  //　锁门
                return  // 退出
            }
            this.send_flag = true;

            this.error_mobile;
            this.error_image;
            if (this.error_mobile == true || this.error_image == true){
                this.send_flag = false;
                return
            }

            let url = '/sms_codes/' + this.mobile + '/?image_code=' + this.image_code + '&uuid=' + this.uuid;
            axios.get(url,{
                responseType:"json"
            })
                .then(response => {
                        if (response.data.code == "0"){
                            //　60秒倒计时
                            let num = 60;
                            let t = setInterval(() =>{
                                if (num == 1){
                                    //停止回调函数
                                    clearInterval(t)
                                    //恢复sms_code_tip
                                    this.sms_code_tip = "获取短信验证码"
                                    //重新生成图形验证码
                                    this.generate_image_code()
                                    this.send_flag = false
                                }else {
                                    num -= 1;
                                    this.sms_code_tip = num +"秒"
                                }

                            },1000)
                        }else {
                            if (response.data.code == "4001"){// 图形验证码错误
                                this.error_mobile_code_message = response.data.errmsg;
                                this.error_mobile_code = true;
                            }else { // 4002 短信验证
                                this.error_mobile_code_message = response.data.errmsg;
                                this.error_mobile_code = true
                            }
                            this.send_flag = false;
                        }
                })
                .catch(error => {
                    console.log(error.response);
                    this.send_flag = false
                })
        },

        // 校验短信验证码
        check_mobile_code(){
            if (this.mobile_code.length == 6){
                this.error_mobile_code = false;
            }else {
                this.error_mobile_code_message = "请输入手机验证码";
                this.error_mobile_code = true;
            }
        },
        // 生成图形验证码的方法　封装的思想　代码复用
        generate_image_code(){
            this.uuid = generateUUID();
            /* 请求数据　*/
            this.image_code_url = '/image_codes/' + this.uuid +'/';
        },
        // 校验图片验证吗
        check_image_code(){
            if (this.image_code.length == 4){
                this.error_image = false;
            }else {
                this.error_image_message = "请输入图形验证码";
                this.error_image = true;
            }
        },

        // 校验用户
        check_username(){
            // 定义正则
            let re = /^[a-zA-Z0-9_-]{5,20}$/;
            if (re.test(this.username)){
                // 正确不显示错误信息
                this.error_username=false;
            }else {
                // 否则显示错误信息
                this.error_username_message="请输入5-20个字符的用户名";
                this.error_username=true;
            }

            // 判断用户名是否重复注册
            if (this.error_username == false) {
              let url = "usernames/"+ this.username +"/count/"
                axios.get(url,{
                    responseType:'json' // 返回后端　格式是json
                })
                    // 正确的操作
                    .then(response => {
                        if (response.data.count == 1){  //response.data 接受响应体 默认转为字典　可以提取ｃｏｕｎｔ
                            this.error_username_message = "当前用户已存在"
                            this.error_username = true
                        }else {
                            this.error_username = false
                        }
                    })
                    // 错误的操作
                    .catch(error => {
                        console.log(error.response)
                    })
            }
        },

        // 校验密码
        check_password(){
            let re = /^[a-zA-Z0-9_-]{8,20}$/;
            if (re.test(this.password)){
                this.error_password = false;
            }else {
                this.error_password = true;
            }
        },
        // 校验确认密码
        check_password2(){
            if (this.password2 != this.password){
                this.error_password2 = true;
            }else {
                this.error_password2 = false;
            }
        },
        // 校验手机
        check_mobile(){
            // 定义正则
            let re = /^1[3-9]\d{9}$/;
            if (re.test(this.mobile)){
                // 正确不显示错误信息
                this.error_mobile = false;
            }else {
                this.error_mobile_message = "您输入的手机格式不正确";
                this.error_mobile = true;
            }

            // 验证手机号是否重复
            if (this.error_mobile == false){
                let url = '/mobiles/'+ this.mobile +'/count/'
                axios.get(url,{
                    responseType: 'json'
                })
                    // 正确操作
                    .then(response => {
                        if (response.data.count == 1){
                            this.error_mobile_message = "手机号重复注册"
                            this.error_mobile = true
                        }else {
                            this.error_mobile = false
                        }
                    })
                    // 错误操作
                    .catch(error => {
                        console.log(error.response)
                    })
            }

        },


        // 校验协议
        check_allow(){
            if (!this.allow){
                this.error_allow = true;
            }else {
                this.error_allow = false;
            }
        },
        // 表单监听
        os_submit(){
            this.check_username();
            this.check_password();
            this.check_password2();
            this.check_mobile();
            this.check_allow();
            this.check_image_code();
            this.check_mobile_code();

            if (this.error_username == true || this.error_password == true || this.error_password2 == true || this.error_mobile == true || this.error_allow == true||this.error_image == true||this.error_mobile_code == true){
                // 禁用表单的提交
                window.event.returnValue = false;
            }
        }
    }
})